/*
 * 最新单品模块
 * @Author: ljb
 * @Date: 2018-11-15 17:20:45
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-01-04 16:29:58
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	/*最新单品的样式*/
	.single-product-area {
		width: 734*@rem-per-px;
		padding: 0 32*@rem-per-px;
		margin: 0 auto 8*@rem-per-px;
		box-sizing: border-box;
		.product-lists {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.product {
				margin-bottom: 16*@rem-per-px;
			}
		}
	}
	/*最新单品的样式 END*/

</style>
<template>
	<section
		v-if="getProducts && getProducts.length > 0"
		class="single-product-area white-bg">
		<blockTitle
			:text="$t('home.latest_product')"
			@click.native="$emit('search',{ search_type: code, layout_module_id: layoutModuleId , title: $t('home.latest_product')})"/>
		<div class="product-lists">
			<singleProduct
				v-for="product in getProducts"
				:key="product.product_id"
				:product-image="product.product_image"
				:product-title="product.product_name"
				:product-price="product.currency_settle_price || product.price"
				:left-symbol="product.symbol_left"
				:right-symbol="product.symbol_right"
				class="product"
				@click.native="handleApp('productDetail', JSON.stringify({id: product.product_id}))"/>
		</div>
	</section>
</template>

<script>

import blockTitle from 'src/views/component/title';
import singleProduct from 'src/views/component/single-product';
import { appHandle } from 'src/views/mixins/appHandle';

/**
 * 最新单品模块
 * @vue-prop {Object} [setting={}] 后端返回的组件数据
 * @vue-prop {String} code 组件名称
 * @vue-prop {Number} layoutModuleId 组件ID
 * @vue-computed {Array} getProducts 商品列表
 */
export default {
	name: 'SingleModule',
	components: {
		blockTitle,
		singleProduct,
	},
	mixins: [appHandle],
	props: {
		setting: {
			type: Object,
			default() {
				return {};
			},
		},
		code: {
			type: String,
			required: true,
		},
		layoutModuleId: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {

		};
	},
	computed: {
		getProducts() {
			return this.setting ? this.setting.latest_products : [];
		},
	},
	methods: {
	},
};
</script>
